<template>
  <div class="main">
    <div class="main-top">
      <div class="main-top-1">
        <ThreeDList></ThreeDList>
        <ResourceTable></ResourceTable>
      </div>
      <div class="main-top-2">
        <AreaRankingList></AreaRankingList>
        <SubjectResourceTable></SubjectResourceTable>
      </div>
    </div>
    <div class="main-bottom">
<MonthTable></MonthTable>
    </div>
  </div>
</template>
<script setup>

import ThreeDList from "@/components/tableRightComponents/ThreeDList.vue";
import AreaRankingList from "@/components/tableRightComponents/AreaRankingList.vue";
import ResourceTable from "@/components/tableRightComponents/ResourceTable.vue";
import SubjectResourceTable from "@/components/tableRightComponents/SubjectResourceTable.vue";
import MonthTable from "@/components/tableRightComponents/MonthTable.vue";
import { Label3d } from "@/mini3d";
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';


</script>
<style lang="scss" scoped>
.main {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 3.54% 4.94% 5.38% 0%;
  color: rgb(255, 255, 255);

  &-top {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    // flex: 1;
    height: 72.21%;
    width: 100%;
    padding-bottom: 2.68%;

    &-1,
    &-2 {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 48.62%;
      // background-color: #df1212a5;
    }
  }
  &-bottom {
    height: 28.41%;
    width: 100%;
    // background-color: #df1212a5;
  }





}
</style>
